<template>
    <el-button class="sc-small" :class="classNameVm" @click="handleClick">
        <slot></slot>
    </el-button>
</template>

<script>
export default {
    name: "ScRadioTextButton",
    props: {
        value: {
            type: [String, Number]
        },
        label: {
            type: [String, Number]
        },
        className: {
            type: String,
            default: "sc-btn-text"
        },
        hoverClassName: {
            type: String,
            default: "sc-btn-minor4"
        },
        /** 是否能够再次点击取消选中 */
        cancelAble: {
            type: Boolean
        }
    },
    computed: {
        classNameVm() {
            if (this.value == this.label) {
                return this.hoverClassName;
            } else {
                return this.className;
            }
        }
    },
    methods: {
        handleClick() {
            //再次点击，取消选中
            if (this.cancelAble && this.value === this.label) {
                this.$emit("input", null);
                return;
            }
            this.$emit("input", this.label);
        }
    }
};
</script>
<style lang="scss" scoped>
.sc-small {
    transition: none;
    padding: 3px 7px 3px 7px;
    &.sc-btn-text,
    &.sc-btn-lark {
        padding: 4px 8px 4px 8px;
    }
}
</style>
